import '@/styles/LoginRegisterCommon.css'
import { useNavigate, Link } from 'react-router-dom';
import React, { useState } from 'react';
import axios from 'axios';
import { message } from 'antd';

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate()
    const [isAnimatedUsername, setIsAnimatedUsername] = useState(false)
    const [isAnimatedPassword, setIsAnimatedPassword] = useState(false);

    const handleFocus = (params) => {
        if (params === 'username') setIsAnimatedUsername(true)
        if (params === 'password') setIsAnimatedPassword(true)
    }
    const handleBlur = (params)=>{
        if (params === 'username' && !username) setIsAnimatedUsername(false);
        if (params === 'password' && !password) setIsAnimatedPassword(false);
    }
    // const handleSubmit = async (event) => {
    //     event.preventDefault();
    //     const data = { email, password };

    //     try {
    //         const response = await axios.post('/api/login', data, {
    //             headers: { 'Content-Type': 'application/json;charset=UTF-8' },
    //         });

    //         if (response.data.code === 200) {
    //             const { roleName, token, nickname, userId } = response.data.data;

    //             if (roleName === '管理员') {
    //                 localStorage.setItem('tokenmanager', token);
    //                 localStorage.setItem('managername', nickname);
    //                 message.success('欢迎管理员uu！');
    //                 navigate('/manager', { replace: true });
    //                 userStore.setManagername(nickname);
    //                 userStore.setManagerId(userId);
    //             } else if (roleName === '普通用户') {
    //                 message.success('登陆成功！欢迎欢迎！');
    //                 localStorage.setItem('token', token);
    //                 localStorage.setItem('userpassword', password);
    //                 localStorage.setItem('username', nickname);
    //                 navigate('/userhome', { replace: true });
    //                 userStore.setPassword(password);
    //                 userStore.setUsername(nickname);
    //             }
    //         } else {
    //             message.error(response.data.message);
    //         }
    //     } catch (error) {
    //         console.error(error);
    //     }
    // }
    const handleSubmit=()=>{

    }
    const handleRegisterClick = () => {
        navigate('/register')
    }
    return <div className="big">
        <div className="container">
            <form onSubmit={handleSubmit}>
                <h2>Login</h2>
                <div className="item">
                    <input
                        type="email" value={username}
                        onFocus={() => handleFocus('username')}
                        onBlur={() => handleBlur('username')}
                        onChange={(e) => setUsername(e.target.value)}
                    />
                    <label className={isAnimatedUsername ? 'animated-class' : ''}>Username</label>
                </div>
                <div className="item">
                    <input
                        type="password"
                        onFocus={() => handleFocus('password')}
                        onBlur={() => handleBlur('password')}
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                    <label className={isAnimatedPassword ? 'animated-class' : ''}>Password</label>
                </div>
                <button>Enter</button>
                <div className="forgot-password">
                    <a href="#">忘记密码？</a>
                </div>
                <div className="conversion" onClick={handleRegisterClick}>
                    尚无账号？前去注册
                </div>
            </form>

        </div>
    </div>
}
export default Login;